<template>
  <div class="personal-con">
    <top/>
    <header class="container">
      <div class="con-main">
        <div class="head-img">
          <img :src="headImg" alt="">
        </div>
        <div class="per-info">
          <h2>昵称: Mo心</h2>
          <span>专业:计算机科学与技术</span>
        </div>
        <div class="writer">
          <div class="wr-top">
            <span class="left-bt-top">
              <span class="bt-red"/>
              <span class="bt-yel"/>
              <span class="bt-green"/>
            </span>
            <div class="right-bt-top" @click="edit">
              <i class="el-icon-edit"/>
              <span class="wr-top-right">编辑</span>
            </div>
          </div>
          <div class="wr-bot">
            <p v-if="showInfo">{{ info }}</p>
            <div v-if="showForm" >
              <textarea v-model="info" class="form-con " name="perInfo" cols="40" rows="3" />
              <div class="bot-btn">
                <button class="close" @click.stop="showInfo=true,showForm=false">取消</button>
                <button class="save" @click.stop="Formsub">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="per-main">
      <div class="sidebar">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu @select="nowInx">
              <h5>个人信息</h5>
              <el-menu-item index="1" @click="changeDataOne">
                <i class="el-icon-tickets"/>
                <span slot="title">我的回答</span>
              </el-menu-item>
              <el-menu-item index="2" @click="changeData">
                <i class="el-icon-question"/>
                <span slot="title">我的发布</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-edit-outline"/>
                <span slot="title">我的评论</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="right-con">
        <div class="block">
          <el-card v-for="(item, idx) in datalist" :key="idx" class="card" >
            <h4>{{ item.title }}</h4>
            <p>{{ item.stu_name }} 发表于 {{ item.time || item.stu_time }}</p>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import top from '../home/top'
import { mapGetters } from 'vuex'
import { getUserQst, UserQst } from '@/api/ask.js'
import { ChangeAbout, getInfo } from '@/api/user.js'
import { nowTime } from '@/utils/index'

export default {
  components: {
    top
  },
  data() {
    return {
      info: '有些事情可能是你无法企及的，但是经过你的努力，总会有一些眉目的。',
      showInfo: true,
      showForm: false,
      datalist: [],
      headImg: ''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'token'
    ])
  },
  created() {
    this.changeDataOne()
    getInfo(this.token).then((res) => {
      console.log(res)
      this.info = res.data.stu_about
      this.headImg = res.avatar
    })
  },
  methods: {
    nowInx: function(idx, idxPath) {
    },
    changeDataOne: function() {
      getUserQst(this.name).then((res) => {
        const data = res.data
        for (let i = 0; i < data.length; i++) {
          data[i].time = nowTime(data[i].time)
        }
        this.datalist = data
      })
    },
    changeData: function() {
      UserQst(this.name).then((res) => {
        const dataCon = res.data
        for (let i = 0; i < dataCon.length; i++) {
          dataCon[i].time = nowTime(dataCon[i].time)
        }
        this.datalist = dataCon
      })
    },
    edit: function() {
      this.showForm = true
      this.showInfo = false
    },
    Formsub: function() {
      this.showInfo = true
      this.showForm = false
      ChangeAbout(this.name, this.info).then((res) => {
        this.$message(res.message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.personal-con {
  font-size: 14px;
  line-height: 1.42858;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  .container {
    padding-top: 130px;
    background-color: #f6f6f6;
    .con-main {
      max-width: 1160px;
      height: 186px;
      margin: 0 auto;
      .head-img {
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 40px;
        float: left;
        margin-top: 15px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .per-info {
        float: left;
        margin-left: 15px;
        margin-top: 15px;
        h2 {
          font-family: inherit;
          font-weight: 500;
          line-height: 1.2;
          color: inherit;
          font-size: 18px;
        }
      }
      .writer {
        width: 350px;
        height: 100px;
        float: right;
        margin-right: 210px;
        .wr-top {
          height: 32px;
          background-color: #E3E3E3;
          padding: 0 12px;
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
          .wr-top-right {
            cursor: pointer;
            color: #999;
            border: none;
            box-shadow: none;
            margin-left: 8px;
            font-size: 12px;
            font-weight: normal;
            text-align: center;
            padding: 1px 5px;
            line-height: 1.5;
            border-radius: 3px;
            &:hover{
              background-color: #f3f3f3;
             }
          }
          .right-bt-top {
            float: right;
          }
          .left-bt-top,.right-bt-top {
            line-height: 32px;
            .bt-red,.bt-yel,.bt-green {
              display: inline-block;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background-color: #FF5F57;
              margin-right: 8px;
            }
            .bt-yel {
              background-color: #FFBD2E;
            }
            .bt-green {
              background-color: #28CA42;
            }
          }
        }
        .wr-bot {
          background-color: #EEEEEE;
          width: 100%;
          font-size: 13px;
          color: #666666;
          overflow: auto;
          height: 154px;
          padding: 20px;
          .form-con {
            display: block;
            width: 100%;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42858;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
          }
          .bot-btn {
            position: relative;
            text-align: right;
            margin-top: 5px;
            button {
              display: inline-block;
              margin-bottom: 0;
              font-weight: normal;
              text-align: center;
              vertical-align: middle;
              cursor: pointer;
              background-image: none;
              border: 1px solid transparent;
              white-space: nowrap;
              padding: 6px 12px;
              font-size: 14px;
              line-height: 1.42858;
              border-radius: 4px;
            }
            .close {
              color: #333;
              background-color: #fff;
              border-color: #ccc;
              &:hover {
                background-color: #ccc;
              }
            }
            .save {
              color: #fff;
              background-color: #009a61;
              border-color: #008151;
              &:hover {
                background-color: #008151;
              }
            }
          }
        }
      }
    }
  }
  .per-main {
    max-width: 1160px;
    margin: 20px auto 0;
    height: calc(80vh - 100px); ;
    .sidebar {
      width: 310px;
      float: left;
    }
    .right-con {
      float: left;
      margin-left: -124px;
      .block {
        width: 800px;
        height: auto;
        .card {
          margin-top: 20px;
        }
      }
    }
  }
}

</style>
